<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#main {
			background: url(images/background_1.png);
			width: 400px;
			height: 600px;
			margin: 20px auto;
			position: relative;
			/* 小飞机可能飞出画面一点 */
			overflow: hidden;
		}
		#titleScore{
			font-size: 18px;
			font-weight: bolder;
			color: white;
			margin-top: 5px;
			margin-left: 5px;
			z-index: 2;
		}
		#stopgame{
			width: 35px;
			height: 35px;
			border: 3px solid #333;
			color: #333;
			border-radius: 40px;
			text-align: center;
			line-height: 32px;
			float: right;
			margin-right: 10px;
			margin-top: 10px;
			font-weight: bolder;
			cursor: pointer;
		}
		#stop{
			width: 400px;
			height: 400px;
			background-color: rgba(0,0,0,0.6);
			padding-top: 200px;  /*paddingtop200+height400=600*/
			position: absolute;
			left: 50%;
			margin-left: -200px;
			top: 20px;
			z-index: 10;
			display: none;   /*控制蒙层*/
		}
		.button{
			width: 150px;
			height: 50px;
			color: #FFFFFF;
			background-color: rgba(0,0,0,0.6);
			text-align: center;
			line-height: 50px;
			border-radius: 20px;
			font-size: 20px;
			font-weight: bolder;
			margin: 0 auto;
			margin-top: 10px;
			cursor: pointer;
		}
	</style>
	<body>
		<div id="main">
			<div id="titleScore">
				<div>杀敌：<span id="killNum">0</span></div>
				<div>复述：<span id="killScore">0</span></div>
				<div>玩家血量：<span id="playerBlood">5</span></div>
			</div>
			<div id="stopgame" onclick="stopmygame()">||</div>
		</div>
		<div id="stop">
			<div class="button" onclick="continuegame()">继续游戏</div>
			<div class="button" onclick="newgame()">新的游戏</div>
			<div class="button" onclick="closegame()">退出游戏</div>
		</div>
		<audio src="./audio/bgm_zhuxuanlv.mp3" id="startMusic"></audio>
		<audio src="audio/arrow_shot.wav" id="shotMusic"></audio>
		
		<script type="text/javascript">
			var mainObj = document.getElementById("main")
			var smallPlaneArry = []; //小飞机数组
			var bulletArry=[];//子弹数组
			// 按键变化
			var upBtn=false
			var rightBtn=false
			var downBtn=false
			var leftBtn=false
			var shootBtn=false
			
			var killNum=document.getElementById("killNum")
			var killScore=document.getElementById("killScore")
			var playerBlood=document.getElementById("playerBlood")
			
			
			var startMusic=document.getElementById("startMusic")  //开始音乐
			var shotMusic=document.getElementById("shotMusic")  //子弹音乐
			
			
			var player=new playerPlaneProto("images/myplane.gif",50,500,10) // 创建玩家飞机
			var smallPlaneTimer= setInterval(createSmallPlane, 1000)  // 每隔一秒创建一架小飞机
			var smallplaneMoveTimer= setInterval(smallPlaneMove, 50)   //小飞机的移动
			var ctrlPlayTimer= setInterval(ctrlPlay,30)   // 短时间监听玩家飞机移动
			var bulleMoveTimer= setInterval(bulletMove,10)   //子弹的移动
			var crashCheckTimer= setInterval(crashCheck,50)   //判断碰撞
			
			var stop=document.getElementById("stop")
			startMusic.play()
			
			// 点击暂停
			function stopmygame(){
				stop.style.display="block"
				clearInterval(smallPlaneTimer)
				clearInterval(smallplaneMoveTimer)
				clearInterval(ctrlPlayTimer)
				clearInterval(bulleMoveTimer)
				clearInterval(crashCheckTimer)
				startMusic.push()
				shotMusic.push()
			}
			// 继续游戏
			function continuegame(){
				stop.style.display="none"
				smallPlaneTimer= setInterval(createSmallPlane, 1000)  // 每隔一秒创建一架小飞机
				smallplaneMoveTimer= setInterval(smallPlaneMove, 50)   //小飞机的移动
				ctrlPlayTimer= setInterval(ctrlPlay,30)   // 短时间监听玩家飞机移动
				bulleMoveTimer= setInterval(bulletMove,10)   //子弹的移动
				crashCheckTimer= setInterval(crashCheck,50)   //判断碰撞
				startMusic.play()
				shotMusic.play()
			}
			// 新游戏
			function newgame(){
				stop.style.display="none"
				mainObj.removeChild(player.imgNode)
				player=null
				// 移除掉所有的小飞机
				for(var i=0;i<smallPlaneArry.length;i++){
					mainObj.removeChild(smallPlaneArry[i].imgNode)
				}
				smallPlaneArry.splice(0,smallPlaneArry.length)
				// 移除掉所有的子弹
				for(var i=0;i<bulletArry.length;i++){
					mainObj.removeChild(bulletArry[i].imgNode)
				}
				bulletArry.splice(0,bulletArry.length)
				killNum.innerHTML=0
				killScore.innerHTML=0
				player=new playerPlaneProto("images/myplane.gif",50,500,10) // 创建玩家飞机
				smallPlaneTimer= setInterval(createSmallPlane, 1000)  // 每隔一秒创建一架小飞机
				smallplaneMoveTimer= setInterval(smallPlaneMove, 50)   //小飞机的移动
				ctrlPlayTimer= setInterval(ctrlPlay,30)   // 短时间监听玩家飞机移动
				bulleMoveTimer= setInterval(bulletMove,10)   //子弹的移动
				crashCheckTimer= setInterval(crashCheck,50)   //判断碰撞
				startMusic.play()
				shotMusic.play()
			}
			
			
			
			// 敌方小飞机对象
			/*
				属性： 图片节点   图片   x坐标   y坐标   速度
				行为： 初始化(把图片结点添加到main里面)   移动 
			*/
			function SmallPlaneProto(imgSrc, x, y, speed) {
				this.imgNode = document.createElement("img")
				this.imgSrc = imgSrc
				this.x = x;
				this.y = y
				this.speed = speed
				this.isDead=false;//敌方小飞机存活状态
				this.exTime=30; //敌方小飞机死亡倒计时
				this.init = function() {
					this.imgNode.src = this.imgSrc
					this.imgNode.style.position = "absolute"
					this.imgNode.style.left = this.x + "px";
					this.imgNode.style.top = this.y + "px";
					mainObj.appendChild(this.imgNode)
				}
				// 初始化
				this.init();
				this.move = function() {
					// 移动
					this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
				}
			}
			// 敌方小飞机创建
			function createSmallPlane() {
				// x=400-小飞机44=356
				var smallPlane = new SmallPlaneProto("./images/enemy1_fly_1.png", parseInt(Math.random() * 356),
					parseInt(Math.random() * 100), parseInt(Math.random() * 10) + 1)
				smallPlaneArry.push(smallPlane)
			}
			
			// 每架小飞机的移动
			function smallPlaneMove() {
				for (var i = 0; i < smallPlaneArry.length; i++) {
					if(smallPlaneArry[i].isDead==false){
						// 活着
						smallPlaneArry[i].move()
						// 当移除画面，删除小飞机
						if (parseInt(smallPlaneArry[i].imgNode.style.top) >= 600) {
							mainObj.removeChild(smallPlaneArry[i].imgNode)
							smallPlaneArry.splice(i, 1)
						}
					}else{
						// 死亡倒计时，每个50毫秒-1
						smallPlaneArry[i].exTime--;
						if(smallPlaneArry[i].exTime==0){
							mainObj.removeChild(smallPlaneArry[i].imgNode)
							smallPlaneArry.splice(i, 1)
						}
						
					}
				}
			}
			
			// 玩家小飞机对象
			/*
				属性： 图片节点   图片   x坐标   y坐标   速度
				行为： 初始化(把图片结点添加到main里面)   移动 (上下左右)，发射子弹
			*/
			function playerPlaneProto(imgSrc, x, y, speed) {
				this.imgNode = document.createElement("img")
				this.imgSrc = imgSrc
				this.x = x
				this.y = y
				this.speed = speed
				this.init = function() {
					this.imgNode.src = this.imgSrc
					this.imgNode.style.position = "absolute"
					this.imgNode.style.left = this.x + "px";
					this.imgNode.style.top = this.y + "px";
					mainObj.appendChild(this.imgNode)
				}
				this.init()
				// 根据按键判断方向，移动位置.左+右-
				this.moveLeft=function(){
					// 判断飞机位置
					if(this.imgNode.style.left=="-80px"){
						this.imgNode.style.left="440px"
					}else{
						this.imgNode.style.left=parseInt(this.imgNode.style.left)-this.speed+"px"
					}
				}
				this.moveRight=function(){
					if(this.imgNode.style.left=="440px"){
						this.imgNode.style.left="80px"
					}else{
						this.imgNode.style.left=parseInt(this.imgNode.style.left)+this.speed+"px"
					}
				}
				this.moveUp=function(){
					if(this.imgNode.style.top=="0px"){
						this.imgNode.style.top="0px"
					}else{
						this.imgNode.style.top=parseInt(this.imgNode.style.top)-this.speed+"px"
					}
				}
				this.moveDown=function(){
					if(this.imgNode.style.top=="520px"){
						this.imgNode.style.top="520px"
					}else{
						this.imgNode.style.top=parseInt(this.imgNode.style.top)+this.speed+"px"
					}
				}
				// 发射子弹
				this.shoot=function(){
					var newBullet=new bulletProto("./images/bullet1.png",parseInt(this.imgNode.style.left)+30,
					parseInt(this.imgNode.style.top)-10,10)
					bulletArry.push(newBullet)
				}
			}
			
			// 在整个网页中按下键盘,37左，38上，39右，40下,32空格
			document.body.onkeydown=function(){
				// 做了火狐的兼容
				var e=window.event||arguments[0]
				// console.log(e.keyCode);  
				// 在这里如果仅仅是去做按键监听的话，是有延迟的
				if(e.keyCode==37){
					leftBtn=true
				}
				if(e.keyCode==38){
					upBtn=true
				}
				if(e.keyCode==39){
					rightBtn=true
				}
				if(e.keyCode==40){
					downBtn=true
				}
				if(e.keyCode==32){
					shootBtn=true
				}
			}
			// 当按键抬起时，把按钮开关 关掉
			// 在整个网页中按下键盘,37左，38上，39右，40下
			document.body.onkeyup=function(){
				// 做了火狐的兼容
				var e=window.event||arguments[0]
				// console.log(e.keyCode);  
				// 在这里如果仅仅是去做按键监听的话，是有延迟的
				if(e.keyCode==37){
					leftBtn=false
				}
				if(e.keyCode==38){
					upBtn=false
				}
				if(e.keyCode==39){
					rightBtn=false
				}
				if(e.keyCode==40){
					downBtn=false
				}
				if(e.keyCode==32){
					shootBtn=false
				}
			}
			// 飞机移动
			function ctrlPlay(){
				if(leftBtn){ player.moveLeft()}
				if(rightBtn){ player.moveRight()}
				if(upBtn){ player.moveUp()}
				if(downBtn){ player.moveDown()}
				if(shootBtn){ 
					player.shoot()
					shotMusic.play()
				}
			}
			
			
			// 子弹对象
			function bulletProto(imgSrc,x,y,speed){
				this.imgNode = document.createElement("img")
				this.imgSrc = imgSrc
				this.x = x
				this.y = y
				this.speed = speed
				this.init = function() {
					this.imgNode.src = this.imgSrc
					this.imgNode.style.position = "absolute"
					this.imgNode.style.left = this.x + "px";
					this.imgNode.style.top = this.y + "px";
					mainObj.appendChild(this.imgNode)
				}
				this.init()
				this.move = function() {
					// 移动
					this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + "px";
				}
			}
			function bulletMove(){
				for(var i=0;i<bulletArry.length;i++){
					bulletArry[i].move()
					// 当子弹飞出画面，删除子弹
					if (parseInt(bulletArry[i].imgNode.style.top) <= -20) {
						mainObj.removeChild(bulletArry[i].imgNode)
						bulletArry.splice(i, 1)
					}
				}
			}
			
			// 碰撞函数
			function crashCheck(){
				for(var i=0;i<smallPlaneArry.length;i++){
					for(var j=0;j<bulletArry.length;j++){
						// 子弹左边
						var btLeft=parseInt(bulletArry[j].imgNode.style.left);
						// 子弹顶边
						var btTop=parseInt(bulletArry[j].imgNode.style.top);
						// 小飞机顶边
						var plTop=parseInt(smallPlaneArry[i].imgNode.style.top)
						// 小飞机左边
						var plLeft=parseInt(smallPlaneArry[i].imgNode.style.left)
						// 判断,敌方小飞机是否活着
						if(smallPlaneArry[i].isDead==false){
							if(btLeft>=plLeft&&btLeft<plLeft+34&&btTop>=plTop&&btTop<plTop+24){
								// console.log("碰撞了");
								// 移除子弹
								mainObj.removeChild(bulletArry[j].imgNode)
								bulletArry.splice(j,1)
								// 敌方小飞机爆炸效果
								smallPlaneArry[i].imgNode.src="./images/smallplaneboom.gif"
								// 存活状态设置为死亡
								smallPlaneArry[i].isDead=true
								// 杀敌数
								killNum.innerHTML=parseInt(killNum.innerHTML)+1
								// 杀敌积分
								killScore.innerHTML=parseInt(killScore.innerHTML)+2
							}
						}
						
					}
				}
			}
			
		</script>
	</body>
</html>
